<template>
    <main-layout>
        <!-- 顶部内容 -->
        <van-nav-bar
            title="技师详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <!--第一部分-->
        <div class="header">
            <img :src="technicianDetailObj.imageurl" />
        </div>

        <!--第二部分-->
        <div class="Tec">
            <div class="TecName">{{technicianDetailObj.techname}}</div>
            <div class="Techexplain">{{technicianDetailObj.techexplain}}</div>
        </div>

        <!--第三部分-->
        <div class="TecService">【服务内容】</div>

        <!--第四部分-->
        <div class="TecItem" v-for="item in technicianDetailObj.project" :key="item.id">
            <div class="proname">{{item.proname}}</div>
            <div class="proprice">{{item.proprice}}</div>
            <div class="projectBtn" @click="toOrderEvt(item.id)">预约</div>
        </div>
    </main-layout>
</template>

<script>
    import { getTechnicianDetailApi } from '../../axios/technicianDetail'
    export default {
        data() {
            return {
                //即使详情对象
                technicianDetailObj:{}
            }
        },

        async created() {
            //截取地址栏id号
            let url = window.location.href
            let id=url.split('=')[1]

            //调用商品详情页接口获取数据
            let technicianDetailResult = await getTechnicianDetailApi(id)
            if(technicianDetailResult.code==0){
                let path=technicianDetailResult.data.imageurl
                technicianDetailResult.data.imageurl='http://120.79.136.98/Hairdressing/images/'+path
                this.technicianDetailObj=technicianDetailResult.data
            }
        },

        methods: {
            //返回上一级
            onClickLeft(){
                this.$router.go(-1)
            },

            //前往预约页
            toOrderEvt(id){
                this.$router.push('/proReservation?id='+id)
            }
        },
    }
</script>

<style lang="less" scoped>
    /* 第一部分 */
    .header{
        width: 100%;
        height: 350px;
        > img{
            width: 100%;
            height: 100%;
        }
    }

    /* 第二部分 */
    .Tec{
        padding: 0 20px;
        .TecName{
            margin: 20px 0;
            font-size: 26px;
            letter-spacing: 5px;
            font-weight: bold;
            text-align: center;
        }

        .Techexplain{
            font-size: 16px;
            line-height: 25px;
            color: #999;
        }
    }

    /* 第三部分 */
    .TecService{
        margin: 25px 0;
        font-weight: bold;
        font-size: 20px;
        padding: 0 15px;
    }

    /* 第四部分 */
    .TecItem{
        display: flex;
        padding: 0 15px;
        margin: 20px 0;
        border-bottom: 2px solid #999;
        padding-bottom: 15px;
        justify-content: left;
        align-items: center;
        .proname{
            font-weight: bold;
            font-size: 18px;
            width: 68%;
        }

        .proprice{
            width: 15%;
            color: #F76C76;
            &::before{
                content: '￥';
            }
        }

        .projectBtn{
            background-color: #F76C76;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            margin-left: 25px;
        }
    }
</style>